<template>
  <DynamicForm :fields="fields" :rules="rules" :onSave="handleSave" :onCancel="handleCancel" />
</template>

<script setup>
import DynamicForm from '@/components/DynamicForm.vue'

const fields = [
  { type: 'input', label: '姓名', name: 'name', placeholder: '请输入姓名' },
  {
    type: 'select',
    label: '性别',
    name: 'gender',
    placeholder: '请选择性别',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  {
    type: 'radio',
    label: '婚姻状况',
    name: 'married',
    options: [
      { label: '已婚', value: 'yes' },
      { label: '未婚', value: 'no' }
    ]
  },
  {
    type: 'checkbox',
    label: '兴趣爱好',
    name: 'hobbies',
    options: [
      { label: '篮球', value: 'basketball' },
      { label: '足球', value: 'football' },
      { label: '音乐', value: 'music' }
    ]
  },
  { type: 'textarea', label: '备注', name: 'remark', placeholder: '请输入备注', rows: 4 },
  { type: 'datetime', label: '生日', name: 'birthday' }
]

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  married: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }],
  hobbies: [{ type: 'array', required: true, message: '请选择兴趣爱好', trigger: 'change' }],
  birthday: [{ type: 'date', required: true, message: '请选择生日', trigger: 'change' }]
}

function handleSave(data) {
  console.log('保存数据:', data)
}

function handleCancel() {
  console.log('取消操作')
}
</script>
